/**
 * Created with hong.rong
 * Date:2020/07/06
 */

import React from 'react'
import { isFunction } from 'lodash'
import { Input, Row, Col, Form, Select, DatePicker, Button } from 'antd'

const FormItem = Form.Item
const Option = Select.Option
const { Search } = Input
const { RangePicker } = DatePicker

export default function SearchComp({ onSearch, refreshList }) {
  const [form] = Form.useForm()

  const handleFieldChange = async (field, value) => {
    const values = await form.validateFields()
    console.log(field, value, 'field')
    console.log(values, 'values')
  }
  return (
    <div className="overflow-hidden">
      <Form form={form}>
        <Row gutter={[16, 16]}>
          <Col span={6}>
            <FormItem name="title">
              <Search
                placeholder="名称/id"
                onSearch={value => handleFieldChange('title', value)}
                enterButton
              />
            </FormItem>
          </Col>
          <Col span={6}>
            <FormItem label="状态" name="groupStatus">
              <Select
                allowClear
                placeholder="请选择"
                onChange={v => handleFieldChange('groupStatus', v)}
              >
                <Option value={1}>未付款</Option>
                <Option value={2}>待发货</Option>
                <Option value={3}>已发货</Option>
                <Option value={4}>已收货</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span={6}>
            <FormItem label="下单时间" name="time">
              <RangePicker onChange={v => handleFieldChange('time', v)} />
            </FormItem>
          </Col>
        </Row>
      </Form>
    </div>
  )
}
